<template>
    <Header></Header>
    <Drawer></Drawer>
    <el-breadcrumb separator="/" style="font-size: 20px;color: #2AB28B;">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Home' }">{{ labName }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/pageList/'+ groupId }">档案管理</el-breadcrumb-item>
      <el-breadcrumb-item>膳食分析</el-breadcrumb-item>
    </el-breadcrumb>
  
    <div class = 'pageListBotton'>
      <el-button :icon="Expand" style="color: white;background: #2AB28B" round @click="pageList">
        档案列表
      </el-button>
      <span class="onBtnRight"  @click="onHome"><img src="../assets/img/pageList_qiehuan.png" alt=""> 更换群体</span>
    </div>
  
    <ChildLeft></ChildLeft>
  
    <el-card class="right-box-card">
      <div style="font-weight:bold;">
        推荐能量：{{ energy_1 }} ~ {{ energy_2 }}
      </div>
      <div style="width:100%;margin:auto;margin-top:20px;display: flex;">
        <div style="width: 20%;">
            <el-input v-model="input_min" placeholder="请输入最小能量值" />
        </div>
        <div style="width: 20%;margin-left: 2%;">
             <el-input v-model="input_max" placeholder="请输入最大能量值" />
        </div>
        <div style="margin-left:2%" @click="querys">
            <el-button type="primary" style="background-color:#2AB28B"> 膳食推荐</el-button>
        </div>
        <div style="margin-left:2%" @click="prints">
            <el-button type="primary" style="background-color:#2AB28B"> 打印</el-button>
        </div>
      </div>

      <div v-if="cookbook" style="margin-top: 20px;">
        <div class="plates" >
        <div class="time-type time-left-color">早餐</div>
        <div class="der">
          <div style="margin-left:6%;padding-top: 6%;">
            <span class="plates-top-img" v-for="breakfast in Opinion_1" :key="breakfast"><img v-if="breakfast.meal_image" :src=" 'http://'+baseUrl+'/' + breakfast.meal_image" alt="" style="width:100px; height:100px;"></span>
            <span class="plates-top-img" v-for="earlier in Opinion_2" :key="earlier"><img v-if="earlier.meal_image" :src="'http://'+baseUrl+'/' + earlier.meal_image" alt="" style="width:100px; height:100px;"></span>
          </div>
        </div>
        <div class="platesFoods">
          <div>早餐7:00: <span v-for="breakfast in Opinion_1" :key="breakfast" ><o v-if="breakfast.food_name" class="foodsNames">{{  breakfast.food_name }}</o> <o v-if="breakfast.weight">重量:{{ breakfast.weight }}g;</o>  </span></div>
          <div>早点10:00: <span v-for="earlier in Opinion_2" :key="earlier"><o v-if="earlier.food_name" class="foodsNames">{{  earlier.food_name }}</o> <o v-if="earlier.weight">重量:{{ earlier.weight }}g;</o>  </span></div>
        </div>
      </div>

      <div class="plates">
        <div class="time-type time-common-color">午餐</div>
        <div class="der">
          <div style="margin-left:6%;padding-top: 6%;">
            <span class="plates-top-img" v-for="lunch in Opinion_3" :key="lunch"><img v-if="lunch.meal_image" :src=" 'http://'+baseUrl+'/' + lunch.meal_image" alt="" style="width:100px; height:100px;"></span>
            <span class="plates-top-img" v-for="noon in Opinion_4" :key="noon"><img v-if="noon.meal_image" :src="'http://'+baseUrl+'/' + noon.meal_image" alt="" style="width:100px; height:100px;"></span>
          </div>
        </div>

        <div class="platesFoods">
          <div>午餐12:00: <span v-for="lunch in Opinion_3" :key="lunch"><o v-if="lunch.food_name" class="foodsNames">{{  lunch.food_name }}</o><o v-if="lunch.weight">重量:{{ lunch.weight }}g;</o>  </span></div>
          <div>午点15:00: <span v-for="noon in Opinion_4" :key="noon"><o v-if="noon.food_name" class="foodsNames">{{  noon.food_name }}</o><o v-if="noon.weight">重量:{{ noon.weight }}g;</o>  </span></div>
        </div>
      </div>

      <div class="plates">
        <div class="time-type time-right-color">晚餐</div>
        <div class="der">
          <div style="margin-left:6%;padding-top: 6%;">
            <span class="plates-top-img" v-for="dinner in Opinion_5" :key="dinner"><img v-if="dinner.meal_image" :src=" 'http://'+baseUrl+'/' + dinner.meal_image" alt="" style="width:100px; height:100px;"></span>
            <span class="plates-top-img" v-for="late in Opinion_6" :key="late"><img v-if="late.meal_image" :src="'http://'+baseUrl+'/' + late.meal_image" alt="" style="width:100px; height:100px;"></span>
          </div>
        </div>

        <div class="platesFoods">
          <div>晚餐18:00: <span v-for="dinner in Opinion_5" :key="dinner"><o class="foodsNames">{{  dinner.food_name }}</o> <o v-if="dinner.weight">重量:{{ dinner.weight }}g;</o>  </span></div>
          <div>晚点21:00: <span v-for="late in Opinion_6" :key="late"><o class="foodsNames">{{  late.food_name }}</o> <o v-if="late.weight ">重量:{{ late.weight }}g;</o> </span></div>
        </div>
      </div>
      </div>
     
    
    </el-card>
  
  
  
  </template>
  
  <script setup>
  import { Edit, CirclePlus, Search, Expand,  } from '@element-plus/icons-vue'
  import {defineComponent, onMounted, ref, watch, reactive} from 'vue'
  import Header from './common/Header.vue';
  import ChildLeft from './common/ChildLeft.vue';
  import {useRoute, useRouter} from "vue-router"
  import http, {baseUrl} from "../utils/http";
  import Drawer from './common/Drawer.vue';
  import {ElMessage, ElMessageBox} from "element-plus";
  import * as api from "../api/loginHttp";
  const route = useRoute()
  const router = useRouter()
  const input_min=ref('')
  const input_max=ref('')
  const cookbook=ref(false)
  const labName = ref()
  const options=ref([ {
      value: '早餐',
      label: '早餐',
    },
    {
      value: '中餐',
      label: '中餐',
    },
    {
      value: '晚餐',
      label: '晚餐',
    },])
    const checkList = ref([])
  const tan =  ref(true)
  const loadings = ref(true)
  const list = ref({})
  const energy = ref(0)
  const energys=ref()
  const OilEnergy = ref(0)
  const drawer = ref(false)
  const energy_1=ref()
  const energy_2=ref()
  const Opinion_1=ref()
  const Opinion_2=ref()
  const Opinion_3=ref()
  const Opinion_4=ref()
  const Opinion_5=ref()
  const Opinion_6=ref()
  const groupId = ref()
  const id = ref()
  const reportId =ref()
  const popWrite = ref(false)
  const popWriteDirection = ref('ttb')

  const pageList = async () => {
    await router.push({'path': '/pageList/' + groupId.value})
  }
  const size = ref('150%')
  
  const formInline = ref({
    Fat:'',
    FatMin:'',
    FatMax:'',
    Bone:'',
    BoneMin:'',
    BoneMax:'',
    Protein:'',
    ProteinMin:'',
    ProteinMax:'',
    Water:'',
    WaterMin:'',
    WaterMax:'',
    LBM:'',
    ICW:'',
    Weight:'',
    WeightMin:'',
    WeightMax:'',
    Muscle:'',
    MuscleMin:'',
    MuscleMax:'',
    PBF:'',
    PBFMin:'',
    PBFMax:'',
    SMM:'',
    SMMMin:'',
    SMMMax:'',
    BMI:'',
    BMIMin:'',
    BMIMax:'',
    WHR:'',
    WHRMin:'',
    WHRMax:'',
    Weight_control:'',
    Fat_control:'',
    Muscle_control:'',
    VFI:'',
    VFIMin:'',
    VFIMax:'',
    Edema:'',
    EdemaMin:'',
    EdemaMax:'',
    ECW:'',
    BMR:'',
  })
  
  const onHome = async () => {
    await router.push({'path': '/Home'})
  }
   
     //查询
   const querys = async ()  => {

    // api.energy( {
    //   'groupId': groupId.value,
    //   'id': id.value,
    //   'reportId': reportId.value,
    // }).then((res)=>{
    //     Opinion_1.value=res.data.data.diet_analysis[0].早餐
    //     Opinion_2.value=res.data.data.diet_analysis[0].早点
    //     Opinion_3.value=res.data.data.diet_analysis[0].午餐
    //     Opinion_4.value=res.data.data.diet_analysis[0].午点
    //     Opinion_5.value=res.data.data.diet_analysis[0].晚餐
    //     Opinion_6.value=res.data.data.diet_analysis[0].晚点
    // })
      if(input_min.value && input_max.value ){
        //本地存储医生输入的建议能量范围
         localStorage.setItem('energyMin', input_min.value);
         localStorage.setItem('energyMax', input_max.value);
          cookbook.value=true;
          let params = {
          'id': reportId.value,
          'user_id':id.value,
          'diet_energy': energy._value,
          'diet':list._rawValue,
          'start_package':input_min.value,
          'end_package':input_max.value,
        };
        const datas = await api.onediet(params);
        console.log(datas,'换菜')
        if(datas.status==200){
          const resss = await api.getonediet({id: route.params.reportId});
        
        if(resss.data.data){
          cookbook.value=true;
          Opinion_1.value = resss.data.data.早餐;
          Opinion_2.value = resss.data.data.早点;
          Opinion_3.value = resss.data.data.午餐;
          Opinion_4.value = resss.data.data.午点;
          Opinion_5.value = resss.data.data.晚餐;
          Opinion_6.value = resss.data.data.晚点;
        }

            // Opinion_1.value=datas.data.data.diet_analysis[0].早餐
            // Opinion_2.value=datas.data.data.diet_analysis[0].早点
            // Opinion_3.value=datas.data.data.diet_analysis[0].午餐
            // Opinion_4.value=datas.data.data.diet_analysis[0].午点
            // Opinion_5.value=datas.data.data.diet_analysis[0].晚餐
            // Opinion_6.value=datas.data.data.diet_analysis[0].晚点
        }else{
          
        }
      }else{
        ElMessage.error('请输入能量范围')
      }
    
  }
  
  const onChange = async (index, value) => {
    list._rawValue[index].energy = (list._rawValue[index].single.energy * value).toFixed(2)
    list._rawValue[index].weight = (list._rawValue[index].single.weight * value).toFixed(2)
    list._rawValue[index].protein = (list._rawValue[index].single.protein * value).toFixed(2)
    list._rawValue[index].fat = (list._rawValue[index].single.fat * value).toFixed(2)
    list._rawValue[index].carbohydrate = (list._rawValue[index].single.carbohydrate * value).toFixed(2)
    list._rawValue[index].calcium = (list._rawValue[index].single.calcium * value).toFixed(2)
    list._rawValue[index].sodium = (list._rawValue[index].single.sodium * value).toFixed(2)
    list._rawValue[index].magnesium = (list._rawValue[index].single.magnesium * value).toFixed(2)
    list._rawValue[index].iron = (list._rawValue[index].single.iron * value).toFixed(2)
    list._rawValue[index].zinc = (list._rawValue[index].single.zinc * value).toFixed(2)
    list._rawValue[index].selenium = (list._rawValue[index].single.selenium * value).toFixed(2)
    list._rawValue[index].vitamin_a = (list._rawValue[index].single.vitamin_a * value).toFixed(2)
    list._rawValue[index].vitamin_e = (list._rawValue[index].single.vitamin_e * value).toFixed(2)
    list._rawValue[index].vitamin_b1 = (list._rawValue[index].single.vitamin_b1 * value).toFixed(2)
    list._rawValue[index].vitamin_b2 = (list._rawValue[index].single.vitamin_b2 * value).toFixed(2)
    list._rawValue[index].vitamin_c = (list._rawValue[index].single.vitamin_c * value).toFixed(2)
  
    energys.value = 0
    for (let i = 0; i < list._rawValue.length; i++) {
      energys.value +=(list._rawValue[i].energy)*1;
      console.log(list._rawValue[i].energy)
  
    }
  
  }
  
  const btn_fenxi = async() => {
    let params = {
      'id': reportId.value,
      'user_id':id.value,
      'diet_energy': energy._value,
      'diet':list._rawValue,
    }
  
    const data = await api.diet(params);
    
    if(data.data.code == 0) {
      ElMessage.error(data.data.msg)
      return false;
    } else {
      const { href } = await router.resolve({
        path:  "/Dietary/"+groupId.value+"/"+id.value+'/'+reportId.value
      });
      window.open(href, "_blank");
    }
  
  }
  const prints = async () => {
    if(Opinion_1.value){
        const { href } = await router.resolve({
        path:  "/Cookbook/"+groupId.value+"/"+id.value+"/"+reportId.value
      });
      window.open(href, "_blank");
    }else{
      ElMessage.error('请先获取一天食物推荐')
    }
   
  }

  const cancelClick = async() => {
    popWrite.value = false;
  }
  
  const confirmClick = async() => {
    Object.keys(formInline._rawValue).forEach(function(item, index) {
      //item 就是当日按循环到的对象
      //index是循环的索引，从0开始
        if (formInline._rawValue[item] == '') {
          ElMessage.error('必填项不能为空')
          return;
        }
      // console.log(formInline._rawValue[item]);
    })
  
  
  
    // for(let i = 0; i < Object.keys(formInline._rawValue).length; i++) {
    //   console.log(i);
    //   console.log(formInline._rawValue[i]);
    //   if (formInline.value[i] == '') {
    //     ElMessage.error('必填项不能为空')
    //     return false;
    //   }
    // }
  }
  
  const get_new = async() => {
    const res = await api.getFood();
  }
  
  // const handClick = async ()  => {
  //   console.log('手动输入体成分数据');
  // }
  
  const handClick = async ()  => {
    popWrite.value = true;
  }
  
  
  
  const appraisal = async ()  => {
    http.get('api/archives/analysis?id='+ id.value+'&type=analysis').then((res)=>{
      if(res.data.code === 0) {
        ElMessage.error(res.data.msg)
      }
    })
  }
  
  const guanbi = async ()  => {
    tan.value = false;
    http.get('api/archives/analysis?id='+ id.value+'&type=cancel').then((res)=>{
      if(res.data.code === 0) {
        ElMessage.error(res.data.msg)
      }
    })
  }
  
  const goto = async () => {
    const { href } = await router.resolve({
      path:  "/analysis/"+groupId.value+"/"+id.value+"/"+reportId.value
    });
    window.open(href, "_blank");
  }
  
  
  const btn = async() => {
    // // 只要点击文档，那么就将数据保存起来
    http.get('api/archives/setReportStatus?reportId='+ reportId.value).then((res)=>{
      if(res.data.code === 0) {
        ElMessage.error(res.data.msg)
        return false
      }
    })
    const { href } = await router.resolve({
      path:  "/reportView/"+groupId.value+"/"+id.value+"/"+reportId.value
    });
    window.open(href, "_blank");
  }
  
  const fetchData = async () => {
    if(route.params.groupId) {
      groupId.value = route.params.groupId
      id.value = route.params.id
      reportId.value = route.params.reportId
      if (groupId.value == 3) {
        labName.value = '婴幼儿营养测评'
      } else if (groupId.value == 5) {
        labName.value = '孕产妇营养测评'
      } else if (groupId.value == 6) {
        labName.value = '成年人营养测评'
      } else if (groupId.value == 7) {
        labName.value = '慢性病营养测评'
      } else if (groupId.value == 8) {
        labName.value = '团体营养测评'
      }
      const ress = await api.getonediet({id: route.params.reportId});
        if(ress.data.data){
          cookbook.value=true;
          Opinion_1.value = ress.data.data.早餐;
          Opinion_2.value = ress.data.data.早点;
          Opinion_3.value = ress.data.data.午餐;
          Opinion_4.value = ress.data.data.午点;
          Opinion_5.value = ress.data.data.晚餐;
          Opinion_6.value = ress.data.data.晚点;
        }

      let params = {
      'groupId': groupId.value,
      'id': id.value,
      'reportId': reportId.value,
    }
    const res = await api.energy(params)
    energy_1.value=res.data.data.packAge[0].start_package
    energy_2.value=res.data.data.packAge[0].end_package


      let ws = new WebSocket('ws://'+baseUrl+':1234');
      ws.onopen = function(){
        let uid = window.localStorage.getItem("MemberId");
        ws.send(uid);
      };
      ws.onmessage = function(e){
        loadings.value = true;
        energy.value = 0;
        let WebList = JSON.parse(e.data);
        for (let i = 0; i < WebList.list.length; i++) {
          WebList.list[i].single = {
            energy: WebList.list[i].energy,
            weight: WebList.list[i].weight,
            protein: WebList.list[i].protein,
            fat: WebList.list[i].fat,
            carbohydrate: WebList.list[i].carbohydrate,
            calcium: WebList.list[i].calcium,
            sodium: WebList.list[i].sodium,
            magnesium: WebList.list[i].magnesium,
            iron: WebList.list[i].iron,
            zinc: WebList.list[i].zinc,
            selenium: WebList.list[i].selenium,
            vitamin_a: WebList.list[i].vitamin_a,
            vitamin_e: WebList.list[i].vitamin_e,
            vitamin_b1: WebList.list[i].vitamin_b1,
            vitamin_b2: WebList.list[i].vitamin_b2,
            vitamin_c: WebList.list[i].vitamin_c,
            checkList:[]
  
          }
          energy.value = energy.value + Number(WebList.list[i].energy);
          energys.value=( energy.value).toFixed(2);
        
        }
  
        list.value = WebList.list;
        list.value.map((item,index)=>{
          console.log(item)
        })
  
        setTimeout(() => {
          loadings.value = false
        },1000);
      };
  
    } else {
      ElMessage.error('栏目编号不得为空')
      await router.push({'path': '/Home'})
    }
  
  }
  
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <style scoped>
  
  
  @import '../assets/css/common.css';
  @media screen and (max-width:1920px) {
  .right-box-card .all button{
    width: 85px;
    margin-right: 14px;
  }
  .el-drawer__body .drVal{
    padding-top: 50px;
  }
  }
  .dietOn {
  height: 500px;
}
.time-botton {
  background-color: #2AB28B;
  width: 108px;
  height: 41px;
  color: #fff;
  font-size: 16px;
  border-radius: 100px;
  line-height: 41px;
  margin: 40px 0 0 40px;
  text-align: center;
}
.plates {
  width: 33%;
  float: left;
}
.time-type {
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  background: #85CE61;
  border-radius: 50%;
  opacity: 1;
  color: #fff;
  box-shadow: 5px 5px 2px #888888;
  margin: 20px 0 20px 40%;
}
.time-left-color {
  background: #85CE61;
}

.time-common-color {
    background: #E8B973;
  }
  
  .time-right-color {
    background: #6EA9E0;
  }
.der{
  width: 354px;
  height: 241px;
  background: url("../assets/img/evaluaction_service_plate.png") 100% 100%;
}
.plates .plates-top-img {
  float: left;
  margin-left: 1%;
}
.platesFoods{
  margin-top: 5px;
  margin-left: 8px;

  color: #333333;
  font-size: 16px;
}
.platesFoods div {
  padding-bottom: 18px;

}
.platesFoods span{
  color: #666666;
}
.foodsNames {
  color:red;
}
  
  .BMIprimary {
    width: 268px;
    height: 70px;
    background: #2AB28B;
    opacity: 1;
    border-radius: 8px;
    font-size: 24px;
  }
  .BMIDefault {
    width: 268px;
    height: 70px;
    background: #fff;
    opacity: 1;
    color: #2AB28B;
    border-radius: 8px;
    font-size: 24px;
    border:1px solid #2ab28b;
  }
  .el-drawer__body {
    overflow: auto;
  }
  .el-drawer__container ::-webkit-scrollbar {
    display: none;
  }
  
  ::v-deep .el-button:focus, .el-button:hover {
    background: #2AB28B;
    color: #fff;
  }
  ::v-deep  .el-progress-bar__inner {
    background: #2AB28B;
  }
  </style>
  <style>
  .right-box-card {
    margin-left: 2%;
    margin-top: 1%;
    position: static;
    top: calc(260px);
    width: 60%;
    float: left;
  
  }
  
  .right-box-card .all span{
    margin-right: 5px;
    font-size: 14px;
  }
  
  .right-box-card .all .num1{
    width: 100px;
    border: none;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #3ea4aa;
  }
  .num {
    width: 62px;
    border: none;
    text-align: center;
    background: #fff;
  }
  
  .right-box-card .all button {
    display: inline-block;
    width: 96px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: #3ea4aa;
    border-radius: 3px;
    color: #ffffff;
    font-size: 16px;
    float: right;
    margin-right: 40px;
    margin-top: 70px;
    border: none;
  }
  </style>
  